<template>
  <form class="js-form" @submit.prevent="submitForm">
    <label>
      名称:
      <input type="text" v-model="formData.name" required />
    </label>
    <button type="submit">提交</button>
    <p v-if="message">{{ message }}</p>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface FormData {
  name: string
}

const formData = ref<FormData>({ name: '' })
const message = ref<string | null>(null)

const submitForm = () => {
  message.value = `提交成功，名称：${formData.value.name}`
}
</script>

<style scoped>
.js-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
</style>